<template>
    <div class="box">
        <div class="small">
            <div @click="goBack"> <img src="https://gw.alicdn.com/imgextra/i1/O1CN01ktrbKb1KExRG2pZqf_!!6000000001133-55-tps-36-36.svg" alt="">
                <p>首页</p>
            </div>

        </div>
        <div class="small">
            <img src="https://gw.alicdn.com/imgextra/i2/O1CN01d7bV241psZmzb4Yss_!!6000000005416-55-tps-36-36.svg"
                alt="">
            <p>首页</p>
        </div>
        <div class="small">
            <img src="https://gw.alicdn.com/imgextra/i3/O1CN012LRN951kqg4AleBc2_!!6000000004735-55-tps-36-36.svg"
                alt="">
            <p>首页</p>
        </div>
        <div class="center">
            <p>加购</p>
        </div>
        <div class="right" @click="gosp">
            <p> 立即购买</p>
            <p class="yh">优惠价￥69起</p>
        </div>
    </div>
    <div class="gosp" @click="gosp">
            <p> 立即购买</p>
            <p class="yh">优惠价￥69起</p>
        </div>
</template>
<script setup lang='ts'>
</script>
<style scoped>
.box {
    width: 100%;
    height: 0.4rem;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    font-size: 0.1rem;
    color: #333;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
}

.small img {
    width: 0.18rem;
    height: 0.18rem;
}

.center {
    text-align: center;
    width: 0.7rem;
    height: 0.3rem;
    border-radius: 1rem;
    font-size: 0.16rem;
    border: #ff0000 0.01rem solid;
    line-height: 0.28rem;
    color: #ff0000;
}

.right {
    width: 1.4rem;
    height: 0.3rem;
    background: linear-gradient(to right, #f33535, #f98080);
    color: #ffffff;
    border-radius: 1rem;
    text-align: center;
    font-size: 0.12rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.yh {
    font-size: 0.08rem;
}
</style>